<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  // 获取上下文路径
  String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生信息API测试</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      overflow: hidden;
    }

    .header {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      color: white;
      padding: 30px;
      text-align: center;
    }

    .header h1 {
      font-size: 2.5em;
      margin-bottom: 10px;
    }

    .header p {
      font-size: 1.1em;
      opacity: 0.9;
    }

    .content {
      padding: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    .control-panel {
      background: #f8f9fa;
      padding: 25px;
      border-radius: 10px;
      border: 2px solid #e9ecef;
    }

    .control-panel h3 {
      color: #495057;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #dee2e6;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #495057;
    }

    .form-group input, .form-group select {
      width: 100%;
      padding: 10px;
      border: 2px solid #e9ecef;
      border-radius: 5px;
      font-size: 14px;
    }

    .btn-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 20px;
    }

    .btn {
      padding: 12px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-primary {
      background: #007bff;
      color: white;
    }

    .btn-primary:hover {
      background: #0056b3;
    }

    .btn-success {
      background: #28a745;
      color: white;
    }

    .btn-success:hover {
      background: #1e7e34;
    }

    .btn-info {
      background: #17a2b8;
      color: white;
    }

    .btn-info:hover {
      background: #138496;
    }

    .result-panel {
      background: #f8f9fa;
      padding: 25px;
      border-radius: 10px;
      border: 2px solid #e9ecef;
    }

    .result-panel h3 {
      color: #495057;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #dee2e6;
    }

    #responseOutput {
      background: #2d3748;
      color: #e2e8f0;
      padding: 15px;
      border-radius: 5px;
      min-height: 400px;
      max-height: 500px;
      overflow-y: auto;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      white-space: pre-wrap;
    }

    .status-indicator {
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .status-success {
      background: #d4edda;
      color: #155724;
    }

    .status-error {
      background: #f8d7da;
      color: #721c24;
    }

    .api-info {
      background: #e7f3ff;
      padding: 15px;
      border-radius: 8px;
      margin-top: 20px;
      font-size: 14px;
    }

    .api-info h4 {
      color: #007bff;
      margin-bottom: 10px;
    }

    .api-info ul {
      list-style: none;
      padding-left: 0;
    }

    .api-info li {
      margin: 5px 0;
      padding-left: 15px;
      position: relative;
    }

    .api-info li:before {
      content: "•";
      color: #007bff;
      position: absolute;
      left: 0;
    }

    .nav-links {
      text-align: center;
      margin-top: 20px;
    }

    .nav-link {
      display: inline-block;
      margin: 0 10px;
      padding: 10px 20px;
      background: #6c757d;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      transition: background 0.3s ease;
    }

    .nav-link:hover {
      background: #5a6268;
    }

    .nav-link.primary {
      background: #007bff;
    }

    .nav-link.primary:hover {
      background: #0056b3;
    }

    @media (max-width: 768px) {
      .content {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>🎓 学生信息API测试系统</h1>
    <p>RESTful API 接口测试平台</p>
  </div>

  <div class="content">
    <div class="control-panel">
      <h3>🔧 API 操作控制台</h3>

      <div class="form-group">
        <label>学号 (ID):</label>
        <input type="text" id="studentId" placeholder="例如: 2023001">
      </div>

      <div class="form-group">
        <label>姓名 (Name):</label>
        <input type="text" id="studentName" placeholder="支持模糊查询">
      </div>

      <div class="form-group">
        <label>班级 (Class):</label>
        <select id="studentClass">
          <option value="">请选择班级</option>
        </select>
      </div>

      <div class="form-group">
        <label>专业 (Major):</label>
        <select id="studentMajor">
          <option value="">请选择专业</option>
        </select>
      </div>

      <div class="form-group">
        <label>性别 (Gender):</label>
        <select id="studentGender">
          <option value="">请选择性别</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>

      <div class="btn-group">
        <button class="btn btn-primary" onclick="getAllStudents()">查询所有学生</button>
        <button class="btn btn-success" onclick="getStudentById()">按学号查询</button>
        <button class="btn btn-info" onclick="searchStudents()">条件搜索</button>
        <button class="btn btn-primary" onclick="getStudentCount()">学生总数</button>
      </div>

      <div class="api-info">
        <h4>📚 API 接口说明</h4>
        <ul>
          <li><strong>GET <%= contextPath %>/api/students?action=getAll</strong> - 获取所有学生</li>
          <li><strong>GET <%= contextPath %>/api/students?action=getById&id=xxx</strong> - 按学号查询</li>
          <li><strong>GET <%= contextPath %>/api/students?action=getByName&name=xxx</strong> - 按姓名查询</li>
          <li><strong>GET <%= contextPath %>/api/students?action=search</strong> - 多条件搜索</li>
          <li><strong>GET <%= contextPath %>/api/students?action=getClasses</strong> - 获取班级列表</li>
          <li><strong>GET <%= contextPath %>/api/students?action=getMajors</strong> - 获取专业列表</li>
          <li><strong>GET <%= contextPath %>/api/students?action=getCount</strong> - 获取学生总数</li>
        </ul>
      </div>

      <div class="nav-links">
        <a href="<%= contextPath %>/api_test/student-list.jsp" class="nav-link">📊 学生列表页面</a>
        <a href="<%= contextPath %>/api_test/index-api.jsp" class="nav-link primary">🏠 返回首页</a>
      </div>
    </div>

    <div class="result-panel">
      <h3>📊 响应结果</h3>
      <div id="statusIndicator" class="status-indicator" style="display: none;"></div>
      <pre id="responseOutput">请选择操作查看API响应结果...</pre>
    </div>
  </div>
</div>

<script>
  // 初始化页面
  document.addEventListener('DOMContentLoaded', function() {
    loadClasses();
    loadMajors();
  });

  // 获取API基础路径
  function getApiBasePath() {
    return '<%= contextPath %>/api/students';
  }

  // 加载班级列表
  async function loadClasses() {
    try {
      const response = await fetch(getApiBasePath() + '?action=getClasses');
      const data = await response.json();

      if (data.success) {
        const classSelect = document.getElementById('studentClass');
        data.data.forEach(className => {
          const option = document.createElement('option');
          option.value = className;
          option.textContent = className;
          classSelect.appendChild(option);
        });
      }
    } catch (error) {
      console.error('加载班级列表失败:', error);
    }
  }

  // 加载专业列表
  async function loadMajors() {
    try {
      const response = await fetch(getApiBasePath() + '?action=getMajors');
      const data = await response.json();

      if (data.success) {
        const majorSelect = document.getElementById('studentMajor');
        data.data.forEach(major => {
          const option = document.createElement('option');
          option.value = major;
          option.textContent = major;
          majorSelect.appendChild(option);
        });
      }
    } catch (error) {
      console.error('加载专业列表失败:', error);
    }
  }

  // 获取所有学生
  async function getAllStudents() {
    try {
      showStatus('正在查询所有学生...', 'loading');

      const response = await fetch(getApiBasePath() + '?action=getAll');
      const data = await response.json();

      displayResponse(data, response.status);
    } catch (error) {
      displayError(error);
    }
  }

  // 按学号查询
  async function getStudentById() {
    const studentId = document.getElementById('studentId').value.trim();

    if (!studentId) {
      alert('请输入学号');
      return;
    }

    try {
      showStatus(`正在查询学号: ${studentId}`, 'loading');

      const response = await fetch(getApiBasePath() + `?action=getById&id=${encodeURIComponent(studentId)}`);
      const data = await response.json();

      displayResponse(data, response.status);
    } catch (error) {
      displayError(error);
    }
  }

  // 条件搜索
  async function searchStudents() {
    const params = new URLSearchParams();
    params.append('action', 'search');

    const id = document.getElementById('studentId').value.trim();
    const name = document.getElementById('studentName').value.trim();
    const className = document.getElementById('studentClass').value;
    const major = document.getElementById('studentMajor').value;
    const gender = document.getElementById('studentGender').value;

    if (id) params.append('id', id);
    if (name) params.append('name', name);
    if (className) params.append('className', className);
    if (major) params.append('major', major);
    if (gender) params.append('gender', gender);

    try {
      showStatus('正在搜索学生...', 'loading');

      const response = await fetch(getApiBasePath() + `?${params}`);
      const data = await response.json();

      displayResponse(data, response.status);
    } catch (error) {
      displayError(error);
    }
  }

  // 获取学生总数
  async function getStudentCount() {
    try {
      showStatus('正在获取学生总数...', 'loading');

      const response = await fetch(getApiBasePath() + '?action=getCount');
      const data = await response.json();

      displayResponse(data, response.status);
    } catch (error) {
      displayError(error);
    }
  }

  // 显示响应结果
  function displayResponse(data, statusCode) {
    const output = document.getElementById('responseOutput');
    output.textContent = JSON.stringify(data, null, 2);

    if (statusCode >= 200 && statusCode < 300) {
      showStatus(`✅ 请求成功 (${statusCode})`, 'success');
    } else {
      showStatus(`❌ 请求失败 (${statusCode})`, 'error');
    }
  }

  // 显示错误
  function displayError(error) {
    const output = document.getElementById('responseOutput');
    output.textContent = `请求失败: ${error.message}`;
    showStatus('❌ 请求发生错误', 'error');
  }

  // 显示状态指示器
  function showStatus(message, type) {
    const indicator = document.getElementById('statusIndicator');
    indicator.textContent = message;
    indicator.className = `status-indicator status-${type}`;
    indicator.style.display = 'block';
  }
</script>
</body>
</html>